<template>
	<view>
		<dz-mask :show="show" :custom-style="customStyle" duration="0" :z-index="zIndex" :maskClickAble="false">
			<view class="warp">
				<view class="content" v-if="status == 'loading'">
					<view v-if="styleLoadingType == 'flower' || styleLoadingType == 'circle'" class="dz-flex dz-row-center">
						<view :class="{'dz-flower':styleLoadingType == 'flower'}">
							<dz-loading :mode="styleLoadingType" :color="theme.dzBaseColor" size="70" borderSize="8"></dz-loading>
						</view>
					</view>
					<shop-loading v-else :mode="styleLoadingType" :color="theme.dzBaseColor" size="70"></shop-loading>
					<view v-if="styleLoadingType != 'flower' && styleLoadingType != 'loading-3'" class="tip dz-m-t-20">{{ loadingText || '正在加载中...' }}</view>
					
				</view>
				<view class="content" v-if="status == 'loadingImg'">
					<image :style="[loadingStyle]" :src="loadingImage" mode="widthFix"></image>
					<view class="tip">{{ loadingText }}</view>
				</view>
				<view class="content" v-if="status == 'error'" @click="errorTab">
					<!-- <image :style="[errorStyle]" :src="errorImage" mode="widthFix" iconSize="360"> </image> -->
					<dz-image :src="errorImage" width="360" height="360"></dz-image>
					<view class="tip">{{ errorText }}</view>
					<view v-if="showBack" class="back" @click="backClick">返回</view>
				</view>
			</view>
		</dz-mask>
	</view>
</template>

<script>
/**
 * pageLoading页面加载
 * @description 该组件一般用于页面的首次加载效果
 * @example <dz-page-loading></dz-page-loading>
 */
import { mapState } from 'vuex';
export default {
	name: 'dz-page-loading',
	props: {
		// 是否显示
		show: {
			type: Boolean,
			default: false
		},
		// 用户自定义样式
		customStyle: {
			type: Object,
			default() {
				return {
					background: '#fff'
				};
			}
		},
		//加载状态，loading,error
		status: {
			type: String,
			default: 'loading'
		},
		//加载中图片
		loadingImage: {
			type: String,
			default:
				''
		},
		//加载中文字
		loadingText: {
			type: String,
			default: ''
		},
		//加载中样式
		loadingStyle: {
			type: Object,
			default() {
				return {
					width: '60rpx',
					height: '60rpx'
				};
			}
		},
		//加载错误图片
		errorImage: {
			type: String,
			default:
				''
		},
		//加载错误文字
		errorText: {
			type: String,
			default: '加载失败，点击重试'
		},
		//错误样式
		errorStyle: {
			type: Object,
			default() {
				return {
					width: '360rpx',
					height: '360rpx'
				};
			}
		},
		showBack: {
			type: Boolean,
			default: false
		},
		// 层级z-index，自定义tabbar为998，navbar为980，为了不覆盖到自定义tabbar，这里默认为979
		zIndex: {
			type: [Number, String],
			default: 979
		}
	},
	data() {
		return {
			theme: this.$api.theme,
		};
	},
	computed: {
		...mapState(['styleLoadingType'])
	},
	methods: {
		errorTab() {
			this.$emit('click');
		},
		backClick() {
			this.$emit('back');
		}
	}
};
</script>

<style scoped lang="scss">
@import '../../css/style.components.scss';

.warp {
	@include vue-flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.content {
	text-align: center;
}
.dz-flower {
	@include vue-flex;
	align-items: center;
	justify-content: center;
	// padding: 30rpx 0;
	width: 120rpx;
	height: 120rpx;
	background: rgba(17, 17, 17, 0.7);
	border-radius: 20rpx;
}
.tip {
	padding: 10rpx 20rpx;
	font-size: 22rpx;
	text-align: center;
	color: #999;
}
.back {
	padding: 10rpx 20rpx;
	font-size: 22rpx;
	text-align: center;
	color: #2979ff;
}
</style>
